<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="queryParam.name" size="small" placeholder="平台名称" clearable class="filter-item form-search-input" @keyup.enter.native="handleSearch" />
      <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
        搜索
      </el-button>
      <el-button size="small" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
        重置
      </el-button>
      <el-button v-action="'platforms@save'" size="small" class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreateTop">
        新增
      </el-button>
    </div>
    <div v-loading="loading">
      <el-table :data="data" style="width: 100%;margin:20px 0;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :max-height="screenHeigh">
        <el-table-column align="center" prop="id" label="平台ID" />
        <el-table-column align="center" prop="name" label="平台名称" />
        <el-table-column align="center" prop="name_ch" label="平台中文名称" />
        <el-table-column align="left" prop="develop_url" label="开发文档链接" />
        <el-table-column align="center" prop="created_at" label="创建时间" />
        <el-table-column align="center" label="操作">
          <template slot-scope="platform">
            <el-button v-action="'platforms@update'" size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate(platform.row)" />
            <el-button v-action="'platforms@delete'" size="mini" type="danger" icon="el-icon-delete" disabled @click="handleDelete(platform.row.id)" />
            <el-button v-if="platform.row.id===3 || platform.row.id===4" v-action="'platforms@setAccount'" size="mini" type="primary" @click="handleAcount(platform.row)">账号配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-------- 回到顶部 ------------>
    <el-backtop :visibility-height="200">
      <i class="el-icon-caret-top" />
    </el-backtop>
    <!------------------------- 平台 ------------------------------>
    <el-dialog :title="title" :visible.sync="formVisible" width="30%" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="平台名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formFieldsData.name" placeholder="请输入平台名称" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="平台中文" :label-width="formLabelWidth" prop="name_ch">
          <el-input v-model="formFieldsData.name_ch" placeholder="请输入平台中文名称" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="开发文档" :label-width="formLabelWidth" prop="develop_url">
          <el-input v-model="formFieldsData.develop_url" placeholder="请输入开发文档链接地址" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="formFieldsData.remark" placeholder="请输入备注" style="width: 92%" type="textarea" autosize />
        </el-form-item>
        <el-input v-model="formFieldsData.parent_id" type="hidden" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 账号配置 弹窗上字段为：account、access_key、user_id、password、pay_account-->
    <el-dialog :title="title" :visible.sync="formVisibleAcction" width="650px" @close="handleCancelAcction">
      <el-form :ref="formNameAcction" :model="formFieldsDataAcction" :rules="rules">
        <el-form-item label="account" :label-width="formLabelWidth" prop="account">
          <el-input v-model="formFieldsDataAcction.account" placeholder="请输入account" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="access_key" :label-width="formLabelWidth" prop="access_key">
          <el-input v-model="formFieldsDataAcction.access_key" placeholder="请输入access_key" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="user_id" :label-width="formLabelWidth" prop="user_id">
          <el-input v-model="formFieldsDataAcction.user_id" placeholder="请输入user_id" style="width: 92%" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="password" :label-width="formLabelWidth" prop="password">
          <el-input v-model="formFieldsDataAcction.password" placeholder="请输入password" style="width: 92%" type="textarea" autosize />
        </el-form-item>
        <el-form-item label="pay_account" :label-width="formLabelWidth" prop="pay_account">
          <el-input v-model="formFieldsDataAcction.pay_account" placeholder="请输入pay_account" style="width: 92%" type="textarea" autosize />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelAcction">取 消</el-button>
        <el-button type="primary" @click="handleSubmitAcction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import { validateFirstUpperCase } from '@/utils/validate'
import cacheList from '@/layout/mixin/cacheList'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'Platform',
  directives: {
    action
  },
  mixins: [formOperate, cacheList],
  data() {
    return {
      otherHeight: 355,
      id: '',
      formVisibleAcction: false,
      formNameAcction: 'PlatformName',
      // account、access_key、user_id、password、pay_account
      formFieldsDataAcction: {
        account: '',
        access_key: '',
        user_id: '',
        password: '',
        pay_account: ''
      },
      componentName: 'Platform',
      formName: 'platforms',
      formLabelWidth: '110px',
      // 刷新路由
      refreshRoute: true,
      formFieldsData: {
        name: '',
        name_ch: '',
        parent_id: 0
      },
      queryParam: { name: '' },
      url: 'platforms',
      // 验证规则
      rules: {
        access_key: [
          { required: true, message: '请输入access_key', trigger: 'blur' }
        ],
        user_id: [
          { required: true, message: '请输入user_id', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入password', trigger: 'blur' }
        ],
        pay_account: [
          { required: true, message: '请输入pay_account', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入account', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入平台名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (validateFirstUpperCase(value)) {
                callback(new Error('平台名称首字母必须大写'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        name_ch: [
          { required: true, message: '请输入平台中文名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 确定账号
    handleSubmitAcction() {
      this.$refs[this.formNameAcction].validate((valid) => {
        const formFieldsData = JSON.stringify(this.formFieldsDataAcction)
        if (valid) {
          this.$http.post(`/platforms/setAccount/${this.id}`, { platform_parameters: formFieldsData }).then(response => {
            this.formVisibleAcction = false
            this.resetFormFields()
            this.getList()
          })
        } else {
          return false
        }
      })
    },
    // 账号配置
    handleAcount(item) {
      this.id = item.id
      this.formFieldsDataAcction = {}
      if (item.platform_parameters) {
        this.formFieldsDataAcction = item.platform_parameters
      }
      this.formVisibleAcction = true
    },
    // 取消账号配置
    handleCancelAcction() {
      this.formVisibleAcction = false
      this.$refs[this.formNameAcction].clearValidate()
    },
    beforeHandleCreate(platform) {
      this.formFieldsData.parent_id = platform.id
      this.handleCreate()
    },
    // 处理
    handleCreateTop() {
      this.formFieldsData.parent_id = 0
      this.handleCreate()
    },
    // 处理提交平台
    beforeSubmit() {
    }
  }
}
</script>
